import { Fragment, useState } from "react";
import { Form, DatePicker, Input, Button, Radio } from "antd";
import './index.css'
import { useNavigate, useLocation } from "react-router-dom";
import dayjs from 'dayjs'
import { addWeekReportApi } from "@/api/api";
var dayOfYear = require('dayjs/plugin/dayOfYear')
dayjs.extend(dayOfYear)

function AddWeekReport() {
    const [count, setcount] = useState([])
    const [value, setValue] = useState(1);
    const initState = useLocation().state
    console.log(initState);
    let doneStr = "请输入本日完成的内容"
    let riskStr = "描述可能有风险的问题，需要帮助的内容，以及延迟的部分和预估延迟的情况"
    const navigate = useNavigate()
    //日期选择后回调
    const onChange = (date) => {
        if (date) {
            return Promise.resolve(setcount(date))
        }
    };
    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
    };

    //点击提交
    const onfinish = (fieldsvalue) => {
        let parms = {
            startTime: dayjs(fieldsvalue.date[0]).format('YYYY-MM-DD'),
            endTime: dayjs(fieldsvalue.date[1]).format('YYYY-MM-DD'),
            content: fieldsvalue.done,
            isBalance: fieldsvalue.delay,
            nextWeekPlan: fieldsvalue.todo
        }
        addWeekReportApi(parms).then((res) => {
            console.log(res);
        })
        console.log(fieldsvalue);
        return navigate('/home/weekly/weekly_paper')
    }
    //返回按钮
    const goback = () => {
        navigate(-1)
    }
    //时间校验规则
    const dateRule = [{
        validator: (rule, value, callback) => {
            if(!value){
                callback("时间不能为空!")
            }
            if (value) {
                (value[1].dayOfYear() - value[0].dayOfYear()) > 4 ? callback("时间间隔大于一周！") : callback()
            }

        }
    }]
    //日期限制
    const disabledDay = (current) => {
        return current && (current.day() !== 1 && current.day() !== 5)
    }

    return (
        <Fragment>
            <Form layout="horizontal" {...layout} disabled={initState? true:false} colon={false} onFinish={onfinish} initialValues={initState ? { todo: initState.todo, date:[dayjs.unix(initState.startDate),dayjs.unix(initState.endDate)], done: initState.todo, delay: initState.delay == "否" ? '0' : '1' } : {}}>
                <Form.Item label=" "><h1 style={{opacity:initState? 0:1}}>新增周报</h1></Form.Item>
                <Form.Item label="日报时间：" required={true} name="date" rules={dateRule}>
                    <DatePicker.RangePicker
                        disabledDate={disabledDay}
                        placeholder={["开始时间", "结束时间"]}
                        onChange={onChange}
                        allowClear={true} />
                </Form.Item>
                <Form.Item label="完成内容描述：" required={true} name="done" rules={[{ required: true, message: "完成内容不能为空!" }]}>
                    <Input.TextArea className="txt" rows={5} cols={33} placeholder={doneStr} />
                </Form.Item>
                <Form.Item label="与计划相比是否有偏差" required={true} name="delay" rules={[{ required: true, message: "选择是否延迟!" }]}>
                    <Radio.Group value={value} >
                        <Radio value={'1'}>是</Radio>
                        <Radio value={'0'}>否</Radio>

                    </Radio.Group>
                </Form.Item>
                <Form.Item label="风险内容描述：" required={true} name="todo" rules={[{ required: true, message: "风险内容不能为空!" }]}>
                    <Input.TextArea className="txt" rows={5} cols={33} placeholder={riskStr} />
                </Form.Item>
                <Form.Item label=" ">
                    <Button type="primary" htmlType="submit">确认提交</Button>
                    <Button onClick={goback} disabled={false} style={{marginLeft:"5rem"}}>返回</Button>
                </Form.Item>
            </Form>
        </Fragment>
    )
}

export default AddWeekReport